<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=EDGE">
	<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
	<title>产品详情页</title>
	 <link rel="icon" href="assets/img/favicon.ico">

    <link rel="stylesheet" type="text/css" href="css/webbase.css" />
    <link rel="stylesheet" type="text/css" href="css/pages-item.css" />
    <link rel="stylesheet" type="text/css" href="css/pages-zoom.css" />
    <link rel="stylesheet" type="text/css" href="css/widget-cartPanelView.css" />
	<script type="text/javascript" src="plugins/angularjs/angular.min.js">  </script>
	<script type="text/javascript" src="js/module/common.js">  </script>
	<script type="text/javascript" src="js/controller/itemController.js">  </script>
	<script>
		var skuList=[
			<#list dpItemList as item>
				{
					id:${item.id?c},
					title:'${item.title}',
					price:${item.price?c},
					spec:${item.spec},
				},
			</#list>
		];
	</script>
</head>
<body ng-app="diploma" ng-controller="itemController" ng-init="loadSku()">
<!--页面顶部 开始-->
<#include "head.ftl">
<#-- 转换图片列表字符串为 json 对象-->
<#assign imageList=goodsDesc.itemImages?eval />
<#--转换扩展属性字符串为 json 对象-->
<#assign customAttributeList=goodsDesc.customAttributeItems?eval/>
<#--转换规格列表字符串为 json 对象 -->
<#assign specificationList=goodsDesc.specificationItems?eval />
<!--页面顶部 结束-->
	<div class="py-container">
		<div id="item">
			<div class="crumb-wrap">
				<ul class="sui-breadcrumb">
					<li>
						<a href="#">${category1}</a>
					</li>
					<li>
						<a href="#">${category2}</a>
					</li>
					<li>
						<a href="#">${category3}</a>
					</li>
				</ul>
			</div>
			<!--product-info-->
			<div class="product-info">
				<div class="fl preview-wrap">
					<!--放大镜效果-->
					<div class="zoom">
						<!--默认第一个预览-->
						<div id="preview" class="spec-preview">
							<#if (imageList?size>0)>
								<span class="jqzoom"><img jqimg="${imageList[0].url}" src="${imageList[0].url}" width="400" height="400"/></span>
							</#if>
						</div>
						<!--下方的缩略图-->
						<div class="spec-scroll">
							<a class="prev">&lt;</a>
							<!--左右按钮-->
							<div class="items">
								<ul>
									<#list imageList as image>
										<li><img src="${image.url}" bimg="${image.url}" onmousemove="preview(this)" /></li>
									</#list>

								</ul>
							</div>
							<a class="next">&gt;</a>
						</div>
					</div>
				</div>
				<div class="fr itemInfo-wrap">
					<div class="sku-name">
						<h4>{{sku.title}}</h4>
					</div>
					<div class="news"><span>${goods.caption}</span></div>
					<div class="summary">
						<div class="summary-wrap">
							<div class="fl title">
								<i>价　　格</i>
							</div>
							<div class="fl price">
								<i>¥</i>
								<em>{{sku.price}}</em>
								<span>降价通知</span>
							</div>
							<div class="fr remark">
								<i>累计评价</i><em>612188</em>
							</div>
						</div>
						<div class="summary-wrap">
							<div class="fl title">
								<i>促　　销</i>
							</div>
							<div class="fl fix-width">
								<i class="red-bg">加价购</i>
								<em class="t-gray">满999.00另加20.00元，或满1999.00另加30.00元，或满2999.00另加40.00元，即可在购物车换
购热销商品</em>
							</div>
						</div>
					</div>
					<div class="support">
						<div class="summary-wrap">
							<div class="fl title">
								<i>支　　持</i>
							</div>
							<div class="fl fix-width">
								<em class="t-gray">以旧换新，闲置手机回收  4G套餐超值抢  礼品购</em>
							</div>
						</div>
						<div class="summary-wrap">
							<div class="fl title">
								<i>配 送 至</i>
							</div>
							<div class="fl fix-width">
								<em class="t-gray">全国任意地区</em>
							</div>
						</div>
					</div>
					<div class="clearfix choose">
						<div id="specification" class="summary-wrap clearfix">
							<#list specificationList as specification>
							<dl>
								<dt>
									<div class="fl title">
									<i>${specification.attributeName}</i>
								</div>
								</dt>
								<#list specification.attributeValue as value>
								<dd><a href="javascript:;" class="{{isSelected('${specification.attributeName}','${value}')?'selected':''}}"
									   ng-click="selectSpecification('${specification.attributeName}','${value}')">
										${value}<span title="点击取消选择">&nbsp;</span>
									</a></dd>
								</#list>
							</dl>
							</#list>
						</div>

						<div class="summary-wrap">
							<div class="fl title">
								<div class="control-group">
									<div class="controls">
										<input autocomplete="off" ng-model="num" type="text" value="1" minnum="1" class="itxt" />
										<a href="javascript:void(0)" class="increment plus" ng-click="addNum(1)">+</a>
										<a href="javascript:void(0)" class="increment mins" ng-click="addNum(-1)">-</a>
									</div>
								</div>
							</div>
							<div class="fl">
								<ul class="btn-choose unstyled">
									<li>
										<a class="sui-btn  btn-danger addshopcar" ng-click="addToCart()">加入购物车</a>
									</li>
								</ul>
							</div>
						</div>
					</div>
				</div>
			</div>
			<!--product-detail-->
			<div class="clearfix product-detail">
					<div class="fl aside">
						<ul class="sui-nav nav-tabs tab-wraped">
							<li class="active">
								<a href="#index" data-toggle="tab">
									<span>相关分类</span>
								</a>
							</li>
							<li>
								<a href="#profile" data-toggle="tab">
									<span>推荐品牌</span>
								</a>
							</li>
						</ul>
						<div class="tab-content tab-wraped">
							<div id="index" class="tab-pane active">
								<ul class="part-list unstyled">
									<li>手机</li>
									<li>手机壳</li>
									<li>内存卡</li>
									<li>Iphone配件</li>
									<li>贴膜</li>
									<li>手机耳机</li>
									<li>移动电源</li>
									<li>平板电脑</li>
								</ul>
								<ul class="goods-list unstyled">
									<li>
										<div class="list-wrap">
											<div class="p-img">
												<img src="img/_/part01.png" />
											</div>
											<div class="attr">
												<em>Apple苹果iPhone 6s (A1699)</em>
											</div>
											<div class="price">
												<strong>
													<em>¥</em>
													<i>6088.00</i>
												</strong>
											</div>
											<div class="operate">
												<a href="javascript:void(0);" class="sui-btn btn-bordered">加入购物车</a>
											</div>
										</div>
									</li>
									<li>
										<div class="list-wrap">
											<div class="p-img">
												<img src="img/_/part02.png" />
											</div>
											<div class="attr">
												<em>Apple苹果iPhone 6s (A1699)</em>
											</div>
											<div class="price">
												<strong>
													<em>¥</em>
													<i>6088.00</i>
												</strong>
											</div>
											<div class="operate">
												<a href="javascript:void(0);" class="sui-btn btn-bordered">加入购物车</a>
											</div>
										</div>
									</li>
									<li>
										<div class="list-wrap">
											<div class="p-img">
												<img src="img/_/part03.png" />
											</div>
											<div class="attr">
												<em>Apple苹果iPhone 6s (A1699)</em>
											</div>
											<div class="price">
												<strong>
													<em>¥</em>
													<i>6088.00</i>
												</strong>
											</div>
											<div class="operate">
												<a href="javascript:void(0);" class="sui-btn btn-bordered">加入购物车</a>
											</div>
										</div>
										<div class="list-wrap">
											<div class="p-img">
												<img src="img/_/part02.png" />
											</div>
											<div class="attr">
												<em>Apple苹果iPhone 6s (A1699)</em>
											</div>
											<div class="price">
												<strong>
													<em>¥</em>
													<i>6088.00</i>
												</strong>
											</div>
											<div class="operate">
												<a href="javascript:void(0);" class="sui-btn btn-bordered">加入购物车</a>
											</div>
										</div>
										<div class="list-wrap">
											<div class="p-img">
												<img src="img/_/part03.png" />
											</div>
											<div class="attr">
												<em>Apple苹果iPhone 6s (A1699)</em>
											</div>
											<div class="price">
												<strong>
													<em>¥</em>
													<i>6088.00</i>
												</strong>
											</div>
											<div class="operate">
												<a href="javascript:void(0);" class="sui-btn btn-bordered">加入购物车</a>
											</div>
										</div>
									</li>
								</ul>
							</div>
							<div id="profile" class="tab-pane">
								<p>推荐品牌</p>
							</div>
						</div>
					</div>
					<div class="fr detail">
					<div class="tab-main intro">
						<ul class="sui-nav nav-tabs tab-wraped">
							<li class="active">
								<a href="#one" data-toggle="tab">
									<span>商品介绍</span>
								</a>
							</li>
							<li>
								<a href="#two" data-toggle="tab">
									<span>规格与包装</span>
								</a>
							</li>
							<li>
								<a href="#three" data-toggle="tab">
									<span>售后保障</span>
								</a>
							</li>
						</ul>
						<div class="clearfix"></div>
						<div class="tab-content tab-wraped">
							<div id="one" class="tab-pane active">
								<ul class="goods-intro unstyled">
									<#list customAttributeList as item>
										<#if item.value??>
											<li>${item.text}：${item.value}</li>
										</#if>

									</#list>
								</ul>
								<div class="intro-detail">
									${goodsDesc.introduction !""}
								</div>
							</div>
							<div id="two" class="tab-pane">
								<p>${goodsDesc.packageList !""}</p>
							</div>
							<div id="three" class="tab-pane">
								<p>${goodsDesc.saleService !""}</p>
							</div>
						</div>
					</div>
				</div>

			</div>
		</div>
	</div>
	<!-- 底部栏位 -->

<!--页面底部  开始 -->
<#include "foot.ftl">
<!--页面底部  结束 -->
</body>

</html>